<template>
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto">
            <el-form-item label="时间" prop="date">
                <el-col :span="5">
                    <el-date-picker 
                        v-model="ruleForm.date" 
                        type="date" 
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="请输入日期" 
                        :default-value="new Date()"
                        style="width: 100%" />
                    <!-- <input v-model="form.date" type="date" placeholder="请输入越线报警数" style="width: 100%" /> -->
                </el-col>
            </el-form-item>

            <el-form-item label="越线" prop="yuexian">
                <el-col :span="5">
                    <el-input-number v-model="ruleForm.yuexian" type="number" placeholder="请输入越线报警数" style="width: 100%" />
                </el-col>
            </el-form-item>

            <el-form-item label="入侵" prop="ruqin">
                <el-col :span="5">
                    <el-input-number v-model="ruleForm.ruqin" type="number" placeholder="请输入入侵报警数" style="width: 100%" />
                </el-col>
            </el-form-item>

            <el-form-item label="聚集" prop="juji">
                <el-col :span="5">
                    <el-input-number v-model="ruleForm.juji" type="number" placeholder="请输入聚集报警数" style="width: 100%" />
                </el-col>
            </el-form-item>

            <el-form-item label="高空抛物" prop="paowu">
                <el-col :span="5">
                    <el-input-number v-model="ruleForm.paowu" type="number" placeholder="请输入高空抛物报警数" style="width: 100%" />
                </el-col>
            </el-form-item>

            <el-form-item label="总数">
                <el-col :span="5">
                    <el-input v-model="ruleForm.total" type="number" disabled style="width: 100%" />
                </el-col>
            </el-form-item>

            <el-form-item label="备注">
                <el-col :span="5">
                    <el-input v-model="ruleForm.desc" type="textarea" placeholder="例如：天气。。。默认为空" />
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button type="primary" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import axios from 'axios';
import { integer } from 'vue-types';
import { ElNotification, ElInput, ElInputNumber } from 'element-plus'

const base_url = "http://10.82.14.162:8000/szw/"

const ruleFormRef = ref()
const ruleForm = reactive({
    date: '',
    yuexian: integer,
    ruqin: integer,
    juji: integer,
    paowu: integer,
    total: integer,
    desc: '',
})
const rules = reactive({
    date: [
        {required: true, message:'请输入日期', trigger: 'blur'},
    ],
    yuexian: [
        {required: true, message:'请输入越线报警数', trigger: 'blur'},
    ],
    ruqin: [
        {required: true, message:'请输入入侵报警数', trigger: 'blur'},
    ],
    juji: [
        {required: true, message:'请输入聚集报警数', trigger: 'blur'},
    ],
    paowu: [
        {required: true, message:'请输入高空抛物报警数', trigger: 'blur'},
    ]
})

const getDate = ()=>{
    let today = new Date()
    let yesterday_milliseconds = today.getTime() - 1000*60*60*24
    let yesterday = new Date()
    yesterday.setTime(yesterday_milliseconds)

    let year = yesterday.getFullYear()
    let month = yesterday.getMonth() + 1
    let day = yesterday.getDate()

    if (month<10){
        month = "0" + month
    }

    let res = year + "-" + month + "-" + day
    return res
}

ruleForm.total = computed(() => {
    console.log('type:', ruleForm.yuexian)
    let tmp = ruleForm.yuexian + ruleForm.ruqin + ruleForm.juji + ruleForm.paowu
    return tmp
})

const submitForm = async(formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid){
            console.log('submit!')
            axios.post(base_url, ruleForm).then(() => {
                ElNotification({
                    title: 'Success',
                    message: '提交成功',
                    type: 'success',
                })
                ruleForm.yuexian = undefined
                ruleForm.ruqin = undefined
                ruleForm.juji = undefined
                ruleForm.paowu = undefined
                ruleForm.desc = undefined
            }).catch(err => {
                console.log(err);
            })
        }else{
            ElNotification({
                    title: 'Error',
                    message: '提交失败',
                    type: 'error',
                })
            console.log('error submit', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(()=>{
    ruleForm.date = getDate()
})
</script>

<style>
</style>